<template>
  <div>
   <table>
    商品清单如下：
    <dl>
     <dt v-for="(item,index) in list " 
    :key="index">
    {{item.shopName}} &emsp; {{item.price}}
    </dt>
    </dl>
    
   请选择购买数量:
    <Buy
    v-for="(item,index) in list" :key="index"
    :shopName='item.shopName'
    :count='item.count'
    :index='index'
    @addSome='add'
    @reduceSome='reduce'
    />
    <span>总价为:{{ price }}</span>
   </table>
  </div>
</template>

<script>
import Buy from './component/Buy'
export default {
    data() {
     return {
      list:[
    {
        "shopName": "可比克薯片",
        "price": 5.5,
        "count": 0
    },
    {
        "shopName": "草莓酱",
        "price": 3.5,
        "count": 0
    },
    {
        "shopName": "红烧肉",
        "price": 55,
        "count": 0
    },
    {
        "shopName": "方便面",
        "price": 12,
        "count": 0
    }
]
     }
    },
    components:{
     Buy
    },
    methods:{
     add(index,n) {
      this.list[index].count += n
     },
     reduce(index,n) {
      this.list[index].count == 0 ? 0 :this.list[index].count -= n 
     }
    },
    computed:{
     price() {
     return  this.list.reduce((item,obj) => item += obj.count * obj.price,0)
     }
    }
}
</script>

<style>

</style>